<template>
  <div class="goodsitem">
    <flexbox :gutter="15" align="flex-start" class="main">
      <flexbox-item span="150">
        <div class="goods_img">
          <img :src="item.picture" alt="">
        </div>
      </flexbox-item>
      <flexbox-item>
        <div class="name">({{item.brand_name}}){{item.goods_name}}</div>
        <div>{{title}}</div>
        <div class="spec_list">
          <flexbox v-for="s in item.goods_specval" :key="s.specval_id" class="spec_item">
            <flexbox-item :span="9">{{s.spec_name}}({{s.specval_name}})</flexbox-item>
            <flexbox-item style="text-align:right">￥{{s.price}}</flexbox-item>
          </flexbox>
        </div>
      </flexbox-item>
    </flexbox>
    <slot/>
  </div>
</template>
<script>
import { Flexbox,FlexboxItem } from "vux";
export default {
  name: "mygoodsitem",
  data() {
    return {};
  },
  props:['item','title'],
  components: {
    Flexbox,
    FlexboxItem
  }
};
</script>
<style scoped lang="less">
.goodsitem{
  background-color: white;
  margin-top: 5px;
  padding: 15px;
}
.name{
  font-size: 18px;
  margin-bottom: 10px;
}
.spec_item{
  line-height: 22px;
}
.main{
  margin-bottom: 15px;
}
.spec_list{
  margin-top: 5px;
}
.goods_img{
  img{
    width: 100%;
  }
}
</style>